<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-23 18:35:30
 * @LastEditTime: 2024-08-23 00:12:31
-->
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { SvgIconButton } from '@/components/SvgIcon'
import { props } from '../props';
const { text, icon, link, options,popoverWidth } = defineProps(props);
const checkBoxOptions = ref(options);
//创建一个具有 getter 和 setter 的计算属性
const checkList = computed({
    get() {        
        return checkBoxOptions.value.filter(column => column.show).map(column => column.prop);
    },
    set(checked) {                
        // 设置表格列的显示与隐藏
        checkBoxOptions.value.forEach(column => {
            // 如果选中，则设置列显示
            if (checked.includes(column.prop)) {
                column.show = true;
            } else {
                // 如果未选中，则设置列隐藏
                column.show = false;
            }
        });
    }
});

</script>
<template>
    <el-popover :width="popoverWidth" trigger="click">
        <template #reference>
            <SvgIconButton :text="text" :icon="icon" :link="link" :size="size" />
        </template>
        <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="item in options" :label="item.label" :value="item.prop" />
        </el-checkbox-group>
    </el-popover>
</template>
